<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="测评记录">
				<view slot="center" class="navTitle">
					测评记录 
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="tbs">
							<view class="i" :class="type==1?'cur':''" @tap="toggleType(1)">
								<view class="it">
									已完成 
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
							<view class="i" :class="type==0?'cur':''" @tap="toggleType(0)">
								<view class="it">
									未完成
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30" @scrolltolower="loadMore">
				<view class="pd30">
					<view class="cepingList" v-if="list&&list.length>0">
						<view class="ceping" v-for="task in list" @tap="viewDetail(task.id)">
							<view class="bg">
								<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxbg2.png" mode="aspectFill"></image>
							</view>
							<view class="tit" v-if="task.evaluationTask">
								<view class="tl">
									<view class="t">
										{{task.evaluationTask.name}}
									</view>
									<view class="p">
										截止日期 {{task.evaluationTask.endTimeFormat}}
									</view>
								</view>
								<view class="tr" :class="task.status?'':'gray'">
									{{task.status?'已完成':'未完成'}}
								</view>
							</view>
							<view class="txt" :class="task.status?'':'gray'">
								<view class="xtit">
									<view class="xt">
										项目进度
									</view>
									<view class="num">
										<text class="cur">{{task.finishCount}}</text>
										<text>/</text>
										<text>{{task.totalCount}}</text>
									</view>
								</view>
								<view class="xp">
									<u-line-progress height="10rpx" inactiveColor="#ffffff" activeColor="#fe9c29" :percentage="task.finishCount/task.totalCount*100" :showText="false"></u-line-progress>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore fontSize="24rpx" :status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
		</view>
		<u-action-sheet @close="showActionSheet=false" :closeOnClickOverlay="true" round="30rpx" :actions="actions[actionSheetIndex]" @select="handleAction" :show="showActionSheet"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldScrollTop:0,
				scrollTop:0,
				type:1,
				list:[],
				pageSize:4,
				total:1,
				pageIndex:1,
				isLoading:false
			}
		},
		methods: {
			viewDetail(id){
				uni.navigateTo({
					url:'/subpage/viewTest/viewTest?id='+id
				})
			},
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			toggleType(type){
				var that=this;
				that.type=type;
				that.list=[];
				that.pageIndex=1;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			
			initData() {
				this.pageIndex = 1
				this.list = []
				this.getList()
			},
			getList() {
				if (this.isLoading) {
					return;
				};
				this.isLoading = true;
				let post = {
					pageNo: this.pageIndex,
					type:0,
					status:this.type
				}
				this.$api.reportList(post, res => {
					if (res.code == 200) {
						let _list = res.data.list;
						this.list = [...this.list,..._list]
						this.total = res.data.total
						this.isLoading = false;
					}
				})
			},
			
			loadMore(){
				var that=this;
				if(that.list.length<that.total&&!that.isLoading){
					that.pageIndex++;
					that.getList();
				}
			}
		},
		computed:{
			
		},
		mounted(){
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.cepingList{
		.ceping{
			padding-bottom: 30rpx;
			.tit{
				margin-bottom: 30rpx;
				.tr{
					flex: 0 0 auto;
					width: 120rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 24rpx;
					background: #fff;
					border: 1rpx solid #fe9c29;
					color: #fe9c29;
					border-radius: 60rpx;
					&.gray{
						background: #f3f0ea;
						border-color: #f3f0ea;
						color: #af9c91;
					}
				}
			}
			.txt{
				background: #fff4e6;
				padding: 25rpx;
				border-radius: 20rpx;
				&.gray{
					background: #f7f4f0;
				}
			}
		}
	}
</style>
